<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格对象</title>
</head>
<body>
    <table id="tabel" border="1px">
        <tr>
            <td>用户名</td>
            <td><input type="text" id="username"></td>
            <td>操作</td>
        </tr>

        <!--
         <tr>
            <td>用户名</td>
            <td><input type="text" id="username" value="钱美美"></td>
            <td>操作</td>
        </tr>
        -->
<!--        <tr>
            <td>密码</td>
            <td><input type="password" id="password"></td>
            <td></td>
        </tr>-->
    </table>
<button onclick="add(this)">点击增加一行</button>
</body>
</html>
<script>
    function add() {
        //1:拿到table
        var table = document.getElementById("tabel");
        //2：创建tr元素
        var tr = document.createElement("tr");
        //3：创建3个td元素
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        var td3 = document.createElement("td");
        //4：给td赋值
        td1.innerText="密码";

        //创建一个密码输入框
        var password = document.createElement("input");
        //设置输入框的类型
        password.setAttribute("type","password");

        //给用户名输入框设置一个用户名
        var name = document.createAttribute("value");
        name.value="钱美美";
        var username = document.getElementById("username");
        username.setAttributeNode(name);

        //在密码输入框中添加密码
        var pwd = document.createAttribute("value");
        pwd.value="123456";
        password.setAttributeNode(pwd);

        //创建一个按钮
        var btn = document.createElement("button");
        btn.innerText="删除";

        btn.onclick = function(){
            var tableNode = this.parentNode.parentNode;
            tableNode.remove();
        }


        //5:将创建的好的对象挂载到指定位置
        td3.appendChild(btn);
        td2.appendChild(password);
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        table.appendChild(tr);
    }
</script>